<template>
  <header class="sticky top-0 z-50 bg-white dark:bg-secondary-800 border-b border-gray-200 dark:border-secondary-700 shadow-sm">
    <div class="flex items-center justify-between h-16 px-4 md:px-6">
      <!-- 左侧区域 -->
      <div class="flex items-center space-x-4">
        <!-- 菜单按钮 -->
        <button 
          @click="toggleSidebar" 
          class="p-2 rounded-full text-secondary-500 hover:bg-gray-100 dark:hover:bg-secondary-700 focus:outline-none"
          aria-label="菜单"
        >
          <el-icon class="text-xl">
            <Menu v-if="isSidebarCollapsed" />
            <Fold v-else />
          </el-icon>
        </button>
        
        <!-- 快捷导航 -->
        <div class="hidden md:flex items-center space-x-3">
          <router-link 
            to="/designer" 
            class="text-sm font-medium px-3 py-1.5 rounded-md transition-colors"
            :class="isActiveRoute('/designer') ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
          >
            <el-icon class="mr-1 text-sm"><Edit /></el-icon>
            AI设计工具
          </router-link>

          <router-link 
            to="/templates/showcase" 
            class="text-sm font-medium px-3 py-1.5 rounded-md transition-colors"
            :class="isActiveRoute('/templates') ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-secondary-600 hover:bg-gray-100 dark:text-secondary-300 dark:hover:bg-secondary-700'"
          >
            <el-icon class="mr-1 text-sm"><PictureFilled /></el-icon>
            AI绘画
          </router-link>
        </div>
        
        <!-- 页面标题 -->
        <div class="ml-2 md:ml-6">
          <h3 class="text-base font-medium text-secondary-600 dark:text-secondary-300">{{ title }}</h3>
        </div>
      </div>
      
      <!-- 右侧区域 -->
      <div class="flex items-center space-x-2">
        <!-- 用户登录状态 -->
        <div class="hidden md:flex items-center mr-2">
          <template v-if="userStore.isLoggedIn">
            <router-link to="/profile" class="flex items-center">
              <img 
                :src="userStore.user.avatar || defaultAvatar" 
                alt="用户头像" 
                class="w-8 h-8 rounded-full object-cover border border-gray-200 dark:border-secondary-700"
              />
              <span class="ml-2 text-sm font-medium text-secondary-600 dark:text-secondary-300 hidden lg:inline">
                {{ userStore.user.nickname || userStore.user.username }}
              </span>
            </router-link>
          </template>
          <template v-else>
            <router-link 
              to="/login" 
              class="text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
            >
              登录
            </router-link>
            <span class="mx-2 text-gray-300 dark:text-secondary-600">|</span>
            <router-link 
              to="/register" 
              class="text-sm font-medium text-secondary-600 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-300"
            >
              注册
            </router-link>
          </template>
        </div>
        
        <!-- 操作按钮 -->
        <button 
          @click="toggleDarkMode" 
          class="p-2 rounded-full text-secondary-500 hover:bg-gray-100 dark:hover:bg-secondary-700 focus:outline-none"
          aria-label="切换主题"
        >
          <el-icon v-if="isDark" class="text-lg"><Sunny /></el-icon>
          <el-icon v-else class="text-lg"><Moon /></el-icon>
        </button>
        
        <button 
          @click="toggleLanguage" 
          class="p-2 rounded-full text-secondary-500 hover:bg-gray-100 dark:hover:bg-secondary-700 focus:outline-none"
          aria-label="设置"
        >
          <el-icon class="text-lg"><Setting /></el-icon>
        </button>
        
        <button 
          @click="refreshPage" 
          class="p-2 rounded-full text-secondary-500 hover:bg-gray-100 dark:hover:bg-secondary-700 focus:outline-none"
          aria-label="刷新"
        >
          <el-icon class="text-lg"><RefreshRight /></el-icon>
        </button>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, inject, computed } from 'vue';
import { Menu, Moon, Sunny, Setting, RefreshRight, User, Fold, Edit, PictureFilled } from '@element-plus/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores/user';

const props = defineProps({
  title: {
    type: String,
    default: 'AI绘画工具'
  },
  isSidebarCollapsed: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['toggle-sidebar']);
const router = useRouter();
const route = useRoute();

// 检查当前路由是否激活
const isActiveRoute = (path) => {
  return route.path.startsWith(path);
};
const isDark = inject('isDark', ref(false));
const toggleDarkMode = inject('toggleDarkMode', () => {});
const userStore = useUserStore();
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

// 切换侧边栏
const toggleSidebar = () => {
  emit('toggle-sidebar');
};

// 切换语言
const toggleLanguage = () => {
  // 语言切换逻辑
};

// 刷新页面
const refreshPage = () => {
  window.location.reload();
};
</script> 